<template>
	<view class="">
		<view>
			<view class="padding text-center margin">
				<image class="cu-avatar lg round" src="../../static/img/avatar2.png" mode=""></image>
			</view>
		</view>
		<view class="padding">
			<view class="padding-bottom-sm">
				姓名
			</view>
			<custom-input 
				:modelValue="info.name" 
				modelName="name"
				@update:modelValue="handleValue"
				placeholder="请输入姓名"
			>
				<text class="iconfont icon-wode1 margin-right text-lg"></text>
			</custom-input>
		</view>
		<view class="padding">
			<view class="padding-bottom-sm">
				职位
			</view>
			<custom-input
				 :modelValue="info.job"
				 modelName="job"
				 @update:modelValue="handleValue"
				 placeholder="请输入期望职位"
			 >
				<text class="iconfont icon-gongwenbao margin-right text-lg"></text>
			</custom-input>
		</view>
		<view class="padding">
			<view class="padding-bottom-sm">
				简历上传
			</view>
			<view v-if="show" class="cu-progress radius striped active">
				<view class="bg-orange step-bar" :style="{width:`${step}%`}">
					
				</view>
			</view>
			<view @click="handleUpload" class="cu-btn line-orange block padding-tb-xl">
				{{show?'正在上传':'上传简历'}}
				<tn-count-to 
					v-if="show" 
					:startVal="0" 
					:endVal="step"
					font-size="24"
					font-color="orange"
				></tn-count-to>
				<text v-if="show" class="text-orange">%</text>
			</view>
		</view>
		<view class="flex padding btn-cont justify-around">
			<button class="cu-btn bg-grey ">取消</button>
			<button class="cu-btn bg-orange " @click="handleSave">保存</button>
		</view>
	</view>
</template>

<script>
	import AV from 'leancloud-storage'
	import { userUpdate } from '../../api/user.js';
	import {pathToBase64} from '../../js_sdk/mmmm-image-tools/index.js'
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				info:{
					name:'艾佛森',
					job:'前端开发',
					resume:'' //简历链接
				},
				step:50,
				show:false
			};
		},
		computed: {
			...mapState({
				userInfo:state=>state.user.userInfo
			})
		},
		methods: {
			handleValue({key,value}) {
				this.info[key] = value
			},
			handleSave(){
				// console.log(this.info);
				let {objectId,sessionToken} = this.userInfo
				userUpdate(objectId,sessionToken,this.info).then(res=>{
					this.$store.commit('user/initInfoMut',{
						...this.userInfo,
						...this.info
					})
				})
			},
			handleUpload(){
				uni.chooseFile({
					success: async(res) => {
						console.log(res);
						this.show = true
						this.step = 40
						let localFileUri = res.tempFilePaths[0] //本地临时资源路径
						let base64  = await pathToBase64(localFileUri)
						this.step = 60
						const file = new AV.File('resume.pdf', {base64})
						this.step = 90
						let res1 = await file.save()
						console.log(res1);
						this.step = 100
						this.info.resume = res1.attributes.url
						uni.showToast({
							title:'上传成功',
							icon:'none'
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss">
.btn-cont{
	.cu-btn{
		width: 40% !important;
	}
}
.step-bar{
	transition: all 1s;
}
</style>
